<template>
  <div class="home">
    <div class="left">
      <el-table :data="domains" :row-class-name="tableRowClassName" border size="small">
        <el-table-column prop="id" label="id" width="180" />
        <el-table-column prop="domain" label="域名" width="180" />
        <el-table-column prop="domain_health" label="域名状态" width="180" />
        <el-table-column prop="createtime" label="时间" width="180" />
      </el-table>
    </div>
    <div class="right"></div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { onMounted, computed } from 'vue'

const store = useStore()
const domains = computed(() => store.state.domains)
const getDomainsAsync = async () => {
  await store.dispatch('getAllDomains')
}

onMounted(() => {
  getDomainsAsync()
})

const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (row.domain_health === "台湾屏蔽") {
    return 'warning-row'
  }
  return ''
}

</script>

<style lang="less">
.el-table .warning-row {
  background-color: #F56C6C;
}

.home {
  width: 100%;
  height: 100%;
  display: flex;

  &>.left{
    height: 100%;
    &>.el-table{
      height: 100%;
    }
  }

  &>.right {
    flex-grow: 1;
  }
}
</style>
